<h2 class="page-header">react_on_rails gem testing</h2>
<h2 class="section-header">
  This page demonstrates a few things the other pages do not show:
</h2>
<ul>
  <li>
    Multiple instance of same component on the page. The ID value of the top level DIVs increments.
  </li>
  <li>
    Rendering a non-react component.
  </li>
</ul>

<hr/>
<h2 class="section-header">Server Rendered/Cached React/Redux Component</h2>
<p>
  Server Caching (Rails.application.config.perform_caching) is <%= $rails_perform_caching %>
  <% if $rails_perform_caching %>
    <br/><b>WARNING: be sure to clear the cache by opening a console and running Rails.cache.clear</b>
  <% end %>
</p>

<pre>
  <%%= react_component("ReduxApp", props: @app_props_server_render.merge(prerender: true), trace: true, prerender: true, id: "ReduxApp-react-component-0") %>
</pre>
<p>
  That will generate this, which is done only once on the server side:
</p>

<%= react_component("ReduxApp", props: @app_props_server_render.merge(prerender: true), trace: true, prerender: true, id: "ReduxApp-react-component-0") %>
<hr/>

<h2 class="section-header">Server Rendered React Component Without Redux</h2>
<pre>
    <%%= react_component("HelloWorld", props: @app_props_server_render, trace: true, id: "HelloWorld-react-component-1") %><br/>
  </pre>
<p>
  And this is an example of a server rendered React component without Redux.
  Note, that we don't suffix the component name with "App"
</p>

<%= react_component("HelloWorld", props: @app_props_server_render, trace: true, id: "HelloWorld-react-component-1") %>
<hr/>

<h2 class="section-header">React Rails Server Rendering with Hooks</h2>
<pre>
    <%%= react_component("HelloWorldHooks", props: @app_props_server_render, prerender: true, trace: true, id: "HelloWorld-react-component-6") %><br/>
</pre>
<%= react_component("HelloWorldHooks", props: @app_props_server_render, prerender: true, trace: true, id: "HelloWorld-react-component-6") %>
<hr/>

<h2 class="section-header">React Rails Server Rendering with Hooks with rails_context</h2>
<pre>
    <%%= react_component("HelloWorldHooksContext", props: @app_props_server_render, prerender: true, trace: true, id: "HelloWorld-react-component-7") %><br/>
</pre>
<%= react_component("HelloWorldHooksContext", props: @app_props_server_render, prerender: true, trace: true, id: "HelloWorld-react-component-7") %>
<hr/>

<h2 class="section-header">Simple Client Rendered Component</h2>
<!-- Passing prerender: true to not render on server -->
<pre>
  <%%= react_component("HelloWorldApp", props: @app_props_hello, prerender: true, trace: true, id: "HelloWorldApp-react-component-2") %>
</pre>
<%= react_component("HelloWorldApp", props: @app_props_hello, prerender: true, trace: true, id: "HelloWorldApp-react-component-2") %>
<hr/>

<h2 class="section-header">Showing you can put the same component twice on a page with different props</h2>
<pre>
  <%%= react_component("HelloWorldApp", props: @app_props_hello_again, prerender: true, trace: true, id: "HelloWorldApp-react-component-3") %>
</pre>
<%= react_component("HelloWorldApp", props: @app_props_hello_again, prerender: true, trace: true, id: "HelloWorldApp-react-component-3") %>
<hr/>

<h2 class="section-header">Component that returns string html on server</h2>
<pre>
  <%%= react_component("HelloWorld", props: @app_props_hello, prerender: true, trace: true, id: "HelloWorld-react-component-4") %>
  <%%= react_component("HelloES5", props: @app_props_hello, prerender: true, trace: true, id: "HelloES5-react-component-5") %>
</pre>
<%= react_component("RenderedHtml", prerender: true, trace: true, id: "HelloWorld-react-component-4") %>
<hr/>

<h2 class="section-header">Simple Component Without Redux</h2>
<pre>
  <%%= react_component("HelloWorld", props: @app_props_hello, prerender: true, trace: true, id: "HelloWorld-react-component-5") %>
  <%%= react_component("HelloES5", props: @app_props_hello, prerender: true, trace: true, id: "HelloES5-react-component-5") %>
</pre>
<%= react_component("HelloWorld", props: @app_props_hello, prerender: true, trace: true, id: "HelloWorld-react-component-5") %>
<%= react_component("HelloWorldES5", props: @app_props_hello, prerender: true, trace: true, id: "HelloWorldES5-react-component-5") %>
<hr/>

<h2 class="section-header">Non-React Component</h2>
<p>For example, Suppose you have some JavaScript that generates a string of HTML:</p>
<pre>
  this.HelloString.world()
</pre>
<p>
  That will generate this:
</p>

<%= server_render_js("ReactOnRails.getComponent('HelloString').component.world()") %>
